<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <script src="/delivery/resources/art-template.js"></script>
    <script src="/delivery/resources/jquery.3.3.1.min.js"></script>
    <link rel="stylesheet" href="/delivery/resources/bootstrap/bootstrap.css">
    <script src="/delivery/resources/bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/delivery/resources/raty/lib/jquery.raty.css">
    <script src="/delivery/resources/raty/lib/jquery.raty.js"></script>

    <style>
        .highlight{
            color: white !important;
        }

        a:active{
            text-decoration:none !important;
        }
        .container {
            padding: 0px;
            margin: 0px;
        }
        .row {
            padding: 0px;
            margin: 0px;
        }
        .scroll1{
            width:100%;
            overflow-x:scroll;
            overflow-y:hidden;
            white-space:nowrap;
        }
        .scroll1 a{
            width:80px;
            display:inline-block;
        }
        .biaoqian{
            height: 20px;
            width: 105px;
            text-align: center;
            font-size: 5px;
            color: orangered;
            background-color: #f1b0b7;
            border: 0px solid red;
            border-radius: 5px;
        }
        .xiaoshi{
            display: none;
        }
        ::-webkit-scrollbar{display: none;}
    </style>
    <#--模板tp1-->
    <script type="text/html" id="tp1">
        <!--行，包含div1,div2，各占4，8格-->

            <!-- 一行二列，左图，右内容 -->
            <#--
            bookName:外卖名称
            author：距离
            subTitle:标签
            evaluationScore：红色的评分
            evaluationQuantity：配送费
            -->
            <div style="position: relative;width: 90%;background-color: white;margin: 0 auto;border-radius: 10px;padding-bottom: 10px" class="row <#--mt-2--> pt-2">
                <a href="/delivery/book/{{bookId}}" style="color: inherit;">
                <div class="col-4 <#--mb-2 pr-2-->" style="display:inline-block;">
                    <img <#--class="img-fluid"--> style="height: 100px;width: 100px;border-radius: 5px" src="/delivery/{{cover}}">
                </div>
                <div class=" <#--mb-2--> <#--pl-0-->" style="width: 140px;display: inline-block;position: absolute;top: 10px;right: 60px;">
                    <h6 class="text-truncate" style="font-weight: bold;width: 110px;">{{bookName}}</h6> <#--文本溢出替换成省略号-->
                    <p style="padding:0px;margin: 0px;">
                        <span class="<#--mt-1 ml-2-->" style="color: red">{{evaluationScore}}分</span>
                        <span class="<#--mt-1 ml-2-->">共{{evaluationQuantity}}人评价</span>
                    </p>
                    <div class="juli">{{author}}</div>
                    <div class="mb-1 biaoqian">{{subTitle}}</div>
                </div>
                </a>
            </div>


        <hr style="margin: 0px 2px 0px 0px;padding: 0px">
    </script>

    <#--模板tp2-->
    <script type="text/html" id="tp2">
        <a href="/delivery/book/{{bookId}}" style="color: inherit;">
            <!-- 二行一列，上图，下内容 -->
            <#--
            bookName:外卖名称
            author：距离
            subTitle:标签
            evaluationScore：红色的评分
            evaluationQuantity：评论数
            -->
            <div style="display: inline-block;float: left; width: 33%;background-color: white;margin: 0 auto;border-radius: 10px;padding-bottom: 10px" class="col <#--mt-2--> pt-2">
                <div class=""style="width: 80px;">
                    <img style="height: 80px;width: 80px;border-radius: 5px" src="/delivery/{{cover}}">
                </div>
                <#--<br style="height: 0px;">-->
                <div class="pl-2" style="width: 30px;">
                    <h6 class="text-truncate" style="margin: 0px;;font-weight: bold;width: 80px;">{{bookName}}</h6> <#--文本溢出替换成省略号-->
                    <p style="padding:0px;margin: 0px;height: 20px;width: 40px;">
                        <span class="" style="color: red;font-size: 15px;font-weight: bold">{{evaluationScore}}分</span>
                    </p>
                    <div style="font-size: 5px;width: 90px;">{{author}}</div>
                </div>
            </div>
        </a>
    </script>

    <script>
        //初始化星形图片目录
        $.fn.raty.defaults.path="/delivery/resources/raty/lib/images"
        function loadNext(isFirst){
            if(isFirst==true){
                $('#bookList').html("")
                /*$('#milkList').html("")*/
                //如果是第一页，页码设置为1
                $('#nextPage').val(1);
            }
            var nextPage=$('#nextPage').val()//如果是第一页，则取出的值是1
            //得到辅助分页类的值
            var categoryId=$('#categoryId').val();
            var order=$('#order').val();
            $.ajax({
                url:"books",
                data:{"page":nextPage,"categoryId":categoryId,"order":order},
                type:"get",
                dataType:"json",
                success:function (info) {
                    var bookList = info.records;
                    for (var i = 0; i < bookList.length; i++) {
                        var book = bookList[i];
                        var html=template("tp1",book);
                        $('#bookList').append(html);
                    }
                    /*星形组件*/
                    $('.stars').raty({readOnly:true});
                    //如果当前页小于总页数，则将下一页nextPage的文本框的值改为：当前页+1
                    if(info.current<info.pages){
                        $('#nextPage').val(parseInt(info.current)+1)
                        //这里在分类和排序时使用，因为会发生else部分的隐藏，就看不到更多了
                        $('#btnMore').show()
                        $('#divNoMore').hide()
                    }else{
                        $('#btnMore').hide()
                        $('#divNoMore').show()
                    }
                }
            })
        }

        $(function () {
            $(document).ready(function () {
                $('#milkList').html("")
                $.ajax({
                    url:"books",
                    data:{"page":1,"categoryId":6,"order":"score"},
                    type:"get",
                    dataType:"json",
                    success:function (info) {
                        var bookList = info.records;
                        for (var i = 0; i < 3; i++) {
                            var book = bookList[i];
                            var html=template("tp2",book);
                            $('#milkList').append(html);
                        }
                    }
                })
            })
        })

        $(function () {
            loadNext(true);//第一次，首页打开时
            $('#btnMore').click(function () {
                loadNext();
            })
            //按类别，设置高亮
            $('.category').click(function () {
                //移除当前高亮
                $('.category').removeClass("highlight")
                //设置category类的样式为灰色
                $('.category').addClass('text-black-50')
                //设置当前点击的类对应的元素，为高亮
                $(this).addClass("highlight")

                //给辅助分页的div赋值
                //首先获取点击的类的值  data-category=""
                var categoryId=$(this).data("category");
                //辅助分页的表单赋值  <input type="hidden" id="categoryId" value="-1">
                $('#categoryId').val(categoryId);

                //既然点了美食，就想马上以category-3来看效果
                loadNext(true);
            })
            $('.order').click(function () {
                $('.order').removeClass("highlight")
                $('.order').addClass('text-black-50')
                $(this).addClass("highlight")

                //给辅助分页的div赋值  <input type="hidden" id="order" value="quantity">
                var order=$(this).data("order")   //data-order="quantity"
                $('#order').val(order);
                //既然点了排序，就想马上以点的排序规则来查询列表
                loadNext(true)
            })
        })
    </script>

</head>
<body>
<div class="container">
    <!-- 导航部分-->
    <nav class="navbar navbar-light <#--shadow--> mr-auto" style="background-color:#02B6FD;">
        <!-- 导航左logo -->
        <ul class="nav">
            <li class="nav-item">

                <img src="/delivery/resources/images/elemo.png" class="mt-1" style="width: 45px;" alt="">
                <span class="pl-2" style="font-size: 18px;font-weight: bold;margin-top: 3px;color: white">吃了么 美食外卖</span>

            </li>
        </ul>
        <!-- 导航右登录图标 -->
        <#--如果已经登录，则显示用户名，否则不显示-->
        <#if loginMember??>
            <h6 style="position: relative" class="mt-1">
                <a href="/delivery/login" style="color:black;">
                <img src="/delivery/resources/images/user_nickicon.png" style="width:2rem;margin-top:-5px;" class="mr-1">${loginMember.nickname}
                </a>
            </h6>
            <a class="chakanshoucang" style="position: absolute;top: 46px;right: 14px;color: white;font-weight: bold;font-size: 14px" href="mysave">查看我的收藏</a>
        <#else>
            <#--页面下方显示横条请登录-->
            <span style="position: absolute;top:57px;left: 25px;color: black;font-weight: bold;line-height: 30px;text-align: center">登录享受更多权益</span>
                <div style="position: relative;height: 30px;width: 100%;margin: 0;padding: 0;background-color:gray;opacity: 0.3;">
                    <a href="login" style="color:white;font-weight: bold;height: 20px;width: 100%;">
                    <div style="float: right;height: 15px;line-height:30px;text-align: center;margin: 0;padding-right: 10px;border-radius: 5px;border: black">点击登录</div>
                    </a>
                </div>
        </#if>
    </nav>
    <#--蓝色边缘模糊图层-->
    <div style="height: 200px; background-color:#02B6FD;background: linear-gradient(180deg,#02B6FD,white)">
        <!-- 第一行 -->
        <div class="row <#--mt-2-->">

            <#--天气小组件-->
            <div class="tq">
                <img src="/delivery/resources/images/didian.png" style="width: 24px;display: inline-block;float:left;">
                <span style="float: left">您所在地区：</span>
                <iframe style="display: inline-block;margin-top: 3px;float:left;" scrolling="no" src="https://tianqiapi.com/api.php?style=ta&skin=orange&cityid=101250101" frameborder="0" width="250px" height="24" allowtransparency="true"></iframe>
            </div>

            <#--分类-->
            <div class="col-12 mt-2 scroll1" style="margin-left: auto;margin-right: auto;">
                <span data-category="-1" style="cursor:pointer" class="highlight font-weight-bold category">全部</span><img
                        src="/delivery/resources/images/boxbox.png" style="width: 20px;">
                <#list categoryList as category>
                    <a style="cursor:pointer" data-category="${category.categoryId}" class="text-black-50 font-weight-bold category">${category.categoryName}</a>
                <#--<#if category_has_next> | </#if>-->
                </#list>
            </div>
            <div class="col-7 mt-2">
                <span data-order="quantity" style="cursor:pointer" class="highlight font-weight-bold text-black-50 mr-3 order">按评价数</span>
                <span data-order="score" style="cursor:pointer" class="font-weight-bold text-black-50 order">按评分</span>
            </div>

            <#if loginMember??>
            <#--显示隐藏二维码的按钮-->
            <button id="button1" class="btn btn-primary" style="font-size: 5px;width: 95px;height: 32px;margin-left: 50px;position: relative">想成为vip？</button>
            <img id="erweima1" src="/delivery/resources/images/erweima.png" alt="" style="width: 95px;height: 95px;position: absolute;top: 95px;right: 117px;display: none">
            </#if>

            <#--活力下午茶推荐 <div id="milkList"></div>-->
            <div style="border:2px solid #1E9FFF;width: 90%;background-color: white;margin: 0 auto;border-radius: 10px" class="row mt-2 pt-2">
                <img src="/delivery/resources/images/jiangpai.png" style="width: 24px;height: 24px;">
                <span>你的活力下午茶推荐</span> <a href="milk"><span style="margin-left: 115px;font-size: 12px">查看更多></span></a>
                <div id="milkList"></div>
            </div>

        </div>



    <!--列表，由多行组成，每行有二个div列，div1占4列，div2占8列，共12格-->
    <div id="bookList"></div>
    <!--加载更多，即分页的按钮 -->
    <button type="button"  id="btnMore" class="btn btn-outline-primary btn-lg btn-block">
        点击加载更多
    </button>
    <div id="divNoMore" class="text-center text-black-50 mb-5" style="display: none">没有其他数据了</div>
    <!--辅助分页-->
    <div class="d-none">
        <input type="hidden" id="nextPage" value="2">
        <input type="hidden" id="categoryId" value="-1">
        <input type="hidden" id="order" value="quantity">
    </div>
    </div>
</div>
<#--这下面是模态窗的标准写法格式-->
<div class="modal fade" tabindex="-1" id="exampleModalCenter" style="width: 80%;margin-left: 40px">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="height: 65px; background-color:#02B6FD;background: linear-gradient(180deg,#9fcdff,white);border:0px">
            <div class="modal-body">
                您还未登录，请先登录！
                <a href="/delivery/login" type="button" class="btn btn-primary">去登录</a>
            </div>
        </div>
    </div>
</div>
</body>
<#--二维码按钮点击效果-->
<script>
    var btn = document.getElementById("button1");
    var img = document.getElementById("erweima1");

    btn.onclick = function(){
        if(btn.innerHTML=="想成为vip？"){
            /*img.style.display = "block";*/
            $("#erweima1").fadeIn(500);
            btn.innerHTML = "关闭二维码";
        }else{
            /*img.style.display = "none";*/
            $("#erweima1").fadeOut(500);
            btn.innerHTML = "想成为vip？";
        }
    }

    /*$("#button1").click(function(){
        $("#erweima1").fadeToggle(500);
    })*/
</script>
</html>

